<template>
<view class="content">
	<!--顶部导航 transparent-->
<view class="nav_float">
	<uni-nav-bar :fixed="true" :znBackIcon="true" :statusBar="true" backgroundColor="transparent" :border="false"></uni-nav-bar>
</view>
	
	<!-- 商品轮播图组件 -->
	<!-- <view class="swiper_box"> -->
		<swiper class="swiper" :indicator-dots="indicatorDots" autoplay="true" >
			<block v-for="(item, index) in banner" :key="index">
				<swiper-item>
					<view class="banner_box" @click="gotopage('banner',item.id)">
						<!-- <u--image 
							:showLoading="true" 
							:src="index" 
							width="100%" 
							height="357px"
							@click="click"
							:lazy-load="true"
						></u--image> -->
						<image class="banner_img" :src="item.img" ></image>
					</view>
				</swiper-item>
			</block>
			
			
		</swiper>
	<!-- </view> -->
	
	<!-- 下滑限时顶部导航栏 -->
	<!-- <view class="posttion-sticky">
		<view style="'background-color': #fff" class="zn-uni-navbar__content">
			<status-bar />
			<view style="background-color': #fff" class="zn-uni-navbar__header zn-uni-navbar__content_view">
				<view @tap="onClickLeft" class="zn-uni-navbar__header-btns zn-uni-navbar__header-btns-left zn-uni-navbar__content_view">
					<zn-back-icon image="../../../../static/img/shopCar1.png" class="zn-uni-navbar__content_view"></zn-back-icon>
				</view>
			</view>
		</view>
	</view> -->
		
		
	<!-- <view class="yao_qin_hao_you_box"> -->
	<view class="yao_qin_hao_you_box1">
		<view class="yao_img_box">
			<image class="yao_img" src="../../static/img/index_banner.png"></image>
		</view>
	</view>
	
	
	<view class="goto_din_box">
		<view class="goto_up_box">
			<view class="goto_img_box">
				<image class="goto_img" src="../../static/img/vip.png"></image>
			</view>
			<view class="goto_text_box">
				<text class="goto_up_text1">您是第</text>
				<text class="goto_up_text2">999</text>
				<text class="goto_up_text3">位加入成长计划服务</text>
			</view>
		</view>
		
		<view class="goto_bottom_box" @click="gotopage('dinghuo')">
			<view class="bacje_img_box">
					<image class="backje_img" src="../../static/img/jiahua.png" ></image>
			</view>
			<view class="g_l_text_box">
				<view class="g_l_text_qian_box">
					<text class="g_l_t_q_t">前往免费订货</text>
					<view class="g_l_t_q_imh_box">
						<image class="img_q" src="../../static/img/index_goto.png" ></image>
					</view>
				</view>
				<view class="meiyu_lingqu_box">每月免费尊享纸尿裤一箱</view>
			</view>
			<!-- 这里添加商品图片 -->
			<view class="goods_img_box_join">
				<image class="joni_img" :src="index_join"></image>
			</view>
		</view>
		
	</view>
	
	
		<view class="renxiao_text">热销产品</view>
		
		
		<view class="goods_list_box">
			<block v-for="(item, index) in goods_list" :key="index">
				<view class="goods_info_box" @click="gotopage('goods_detail', item.id)">
					<view class="goods_img_box">
						<!-- <u--image
							:showLoading="true" 
							src="../../../../static/index_shopCar.pnglogo.png" 
							width="174px" 
							height="174px"
							@click="gotopage('goods_detail')"
							:lazy-load="true"
						></u--image> -->
						<image class="goods_imgs" :src="item.image" ></image>
					</view>
					<view class="goods_name">{{item.title}}</view>
					<view class="goods_price_box">
						<view class="goods_price_l">
							<view class="gooda_text1">¥</view>
							<view class="gooda_text2">{{item.price}}</view>
						</view>
						<view class="goods_shopCar">
							<image class="shopCar_img" src="../../static/img/index_shopCar.png"></image>
						</view>
					</view>
				</view>
			</block>
		</view>
		
	<view style="height: 50upx;"></view>
	<u-loadmore status="nomore" />
	<zn-tabbar @changeTabbar="changeTabbar" :value4="value4" :vipStatus="vipStatus"></zn-tabbar>
	
	
</view>
</template>

<script>
	import ZnTabbar from '@/components/zn-tabbar/zn-tabbar.vue';
	import statusBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar.vue";
	import ZnBackIcon from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/zn-back-icon.vue";
	import HostConfig from '@/utils/host.js';
	import Host from '@/utils/api.js';
	const app = getApp();
	export default {
		components: {
			ZnTabbar,
			statusBar,
			ZnBackIcon,
		},
		data() {
			return {
				value4:1,
				banner: [],	// 轮播图
				index_join: [], // 免费定购商品图片
				goods_list: '', // 商品列表
				vipStatus: getApp().globalData.vipStatus,
			}
		},
		onLoad() {
			console.log(getApp().globalData.vipStatus)
			let that = this;
			uni.request({
				url: Host.ApiBanner.url, //仅为示例，并非真实接口地址。
				method: 'GET',
				success: (res) => {
					let zhensongImg = res.data.image;
					let hostUrl = HostConfig.service.host;
					var list = res.data.data;
					list.map((value, index) =>{
						if(value.location == 'banner'){	// 轮播图
							that.banner.push({'id': value.id, 'img':hostUrl + value['image']});
						}
						if(value.location == 'index-join'){	// 免费定购商品图片
							that.index_join.push(hostUrl + value['image']);
						}
					})				
				}
			});
			// 商品列表接口
			uni.request({
				url: Host.ApiGetGoodsList.url, //仅为示例，并非真实接口地址。
				method: 'GET',
				data:{
					category_type: 'hot'
				},
				success: (res) => {
					let hostUrl = HostConfig.service.host;
					var list = res.data.data;
					list.map((value, index) =>{
						if(value.category_type == 'hot'){	// 商品图
							value['image'] = hostUrl + value['image'];
						}
					});
					that.goods_list = list;
				}
			});
			// 判断用户是否为会员
			uni.login({
			  provider: 'weixin',
			  success: function (loginRes) {
				uni.request({
					url: Host.ApiGetOpenid.url, //仅为示例，并非真实接口地址。
					method: 'GET',
					data: {
						code: loginRes.code,
					},
					success: (res) => {
						that.openid = res.data.openid;
						uni.request({
							url: Host.ApiGetuserInfo.url, //仅为示例，并非真实接口地址。
							method: 'GET',
							data: {
								openid: that.openid,
							},
							success: (res) => {
								if(res.data.result == ""){
									console.log('普通会员');
									that.vipStatus = 1;//普通用户
								}else{
									that.vipStatus = 2;//会员
								}
							}
						});
					}
				});
			  }
			});
		},
		methods: {
			gotopage(param,id = 0){
				if(param == 'goods_detail'){
					uni.navigateTo({
						url:'/pages/goods/goods_detail?goods_id=' + id,
					})
				}
				if(param == 'banner' && id != 0){
					console.log(id)
					uni.navigateTo({
						url:'/pages/fuwenb/fuwenb?id=' + id,
					});
				}
				if(param == 'dinghuo'){
					if(app.globalData.vipStatus == 1){
						uni.navigateTo({
							url:'/pages/zhunxingfuwu/jiarujiahua/jiarujiahua',//加入计划
						});
					}else if(app.globalData.vipStatus == 2){
						uni.navigateTo({
							url:'/pages/goods/feed/goods_detail?goods_id=' + 1,//商品详情
						})
					}
				}
			},
			changeTabbar(e){
				this.value4 = e;
			}
		},
	}
</script>

<style>
	page{
		background: #F6F8F9;
	}
	.content{
	  width: 100%;
	  overflow-x:hidden;
	}
	.nav_float{
		position: absolute;
		overflow-x:hidden;
	}

	.posttion-sticky{
		position: sticky;
		top: 0;
		z-index: 128;
		margin-top: 48upx;
	}
	.swiper{
		width: 100%;
		height: 714upx;
	}
	.banner_box{
		height: 715upx;
		width: 100%;
	}
	.banner_img{
		height: 715upx;
		width: 100%;

	}
	.zn-uni-navbar__content {
		position: relative;
		background-color: #fff;
		overflow: hidden;
	}
	.zn-uni-navbar__header {
		padding: 0 10px;
		display: flex;
		flex-direction: row;
		height:44px;
		line-height: 44px;
		font-size: 12px;
	}
	.zn-uni-navbar__content_view {
		display: flex;
		align-items: center;
		flex-direction: row;
	}
	
	.zn-uni-navbar__header-btns-left {
		display: flex;
		width: 120rpx;
		justify-content: flex-start;
	}
	
	.zn-uni-navbar__header-btns-right {
		display: flex;
		justify-content: flex-end;
	}
	.yao_qin_hao_you_box1{
		margin-top: 48upx;
		margin-left: 16upx;
		height: 150upx;
	}
	.yao_qin_hao_you_box{
		position: absolute;
		top: 750upx;
		width: 100%;
		z-index: 9999;
		height: 150upx;
		left: 16upx;
		background: #F6F8F9;
		overflow-x: hidden;
	}
	.yao_img_box{
		width: 718upx;
		height: 148upx;
	}
	.yao_img{
		width: 718upx;
		height: 148upx;
	}
	.goto_din_box{
		margin: 36upx 16upx 0 16upx;
		background: linear-gradient(47deg, #FFD4AE 0%, #FFDEC4 100%);
		border-radius: 20upx;
		width: 718upx;
		height: 326upx;
		padding: 30upx 20upx 24upx 20upx;
		box-sizing: border-box;
	}
	.goto_up_box{
		display: flex;
		align-items: center;
	}
	.goto_img_box{
		width: 52upx;
		height: 52upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.goto_img{
		width: 52upx;
		height: 52upx;
	}
	.goto_text_box{
		font-size: 28upx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #343A3D;
		line-height: 40upx;
		margin-left: 12upx;
	}
	.goto_up_text2{
		color: #FF4E2F;
	}
	.g_l_t_q_imh_box{
		width: 56upx;
		height: 44upx;
		margin-left: 12upx;
	}
	.img_q{
		width: 56upx;
		height: 44upx;
	}
	.goto_bottom_box{
		margin-top: 30upx;
		height: 194upx;
		width: 678upx;
		background: #fff;
		/* padding: 42upx 20upx 26upx 20upx; */
		box-sizing: border-box;
		border-radius: 8upx;
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.g_l_text_box{
		width: 369upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 1;
		margin-left: 20upx;
	}
	.g_l_text_qian_box{
		display: flex;
		width: 332upx;
		height: 60upx;
		align-items: center;
	}
	.g_l_t_q_t{
		font-size: 44upx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 60upx;
	}
	.meiyu_lingqu_box{
		width: 368upx;
		margin-top: 8upx;
		background: linear-gradient(90deg, #FFD1A9 0%, #FFE5D1 100%);
		border-radius: 29upx;
		text-align: center;
		height: 58upx;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;

		font-size: 28upx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #282D30;
	}
	.renxiao_text{
		width: 144upx;
		height: 50upx;
		font-size: 36upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 50upx;
		margin: 48upx 0 0 36upx;
		box-sizing: border-box;
	}
	
	.goods_list_box{
		margin: 24upx 0 0 16upx;
		width: 718upx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.goods_info_box{
		background-color: #FFFFFF;
		width: 348upx;
		height: 482upx;
		margin-bottom: 14upx;
	}
	.goods_img_box{
		width: 348upx;
		height: 348upx;
	}
	.goods_imgs{
		width: 348upx;
		height: 348upx;
	}
	.goods_name{
		width: 310upx;
		height: 68upx;
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 34upx;
		margin-left: 24upx;
	}
	.goods_price_box{
		display: flex;
		justify-content: space-between;
		width: 294upx;
		margin-top: 14upx;
		margin-left: 26upx;
		overflow: hidden;
		align-items: center;
	}
	.goods_price_l{
		display: flex;
	}
	.gooda_text1{
		font-size: 24upx;
		font-family: DINAlternate-Bold, DINAlternate;
		font-weight: bold;
		color: #FF4E2F;
		line-height: 40upx;
	}
	.gooda_text2{
		font-size: 36upx;
		font-family: DINAlternate-Bold, DINAlternate;
		font-weight: bold;
		color: #FF4E2F;
		line-height: 40upx;
	}
	.goods_shopCar{
		width: 40upx;
		height: 42upx;
	}
	.shopCar_img{
		width: 40upx;
		height: 42upx;
		
	}
	.bacje_img_box{
		width: 476upx;
		height: 194upx;
		position: absolute;
		top: 0;
		left: 0;
	}
	.backje_img{
		width: 476upx;
		height: 194upx;
	}
	.goods_img_box_join{
		width: 200upx;
		height: 194upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.joni_img{
		width: 196upx;
		height: 174upx;
	}
</style>
